<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#">
    <table width="600" height="350px">
        <tr>
            <td colspan="3"><font color="#3164af">会员注册</font> USER REGISTER</td>
        </tr>
        <tr>
            <td align="right">用户名</td>
            <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60"/></td>
        </tr>
        <tr>
            <td align="right">密码</td>
            <td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60"/></td>
        </tr>
        <tr>
            <td align="right">确认密码</td>
            <td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60"/></td>
        </tr>
        <tr>
            <td align="right">Email</td>
            <td colspan="2"><input id="emailId" type="text" name="email" size="60"/></td>
        </tr>
        <tr>
            <td align="right">姓名</td>
            <td colspan="2"><input name="text" name="username" size="60"/></td>
        </tr>
        <tr>
            <td align="right">性别</td>
            <td colspan="2"><input type="radio" name="gender" value="男" checked="checked"/>男 <input type="radio"
                                                                                                    name="gender" value="女"/>女
            </td>
        </tr>
        <tr>
            <td align="right">电话号码</td>
            <td colspan="2"><input type="text" name="phone" size="60"/></td>
        </tr>
        <tr>
            <td align="right">所在地</td>
            <td colspan="3">
                <select id="provinceId" style="width:150px" onchange="gaibian()">
                    <option value="">----请-选-择-省----</option>
                </select>
                <select id="cityId" style="width:150px">
                    <option value="">----请-选-择-市----</option>
                </select></td>
        </tr>
        <tr>
            <td width="80" align="right">验证码</td>
            <td width="100"><input type="text" name="verifyCode"/></td>
            <td><img src="../img/checkMa.png"/></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"><input type="submit" value="注册"/></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    //准备省市数据
    let provinceData = ["北京","河北","辽宁"];
    //准备省对应的市数据
    let cityData = { "北京":["顺义区","昌平区","朝阳区"], "河北":["保定","石家庄","廊坊"], "辽宁":["沈阳","铁岭","抚顺"]};
    /*先设置省数据*/
    //1.获取省标签
    let provinceObj = document.querySelector("#provinceId");
    // 进行遍历
    for (let provinceDatum of provinceData) {
        // 进行遍历
        provinceObj.innerHTML += `<option value="${provinceDatum}">${provinceDatum}</option>`;
    }
    // 市改变函数
    function gaibian() {
        // 获取改变后的省
        let shen = provinceObj.value;
        // 获取对应的市
        let shiqu = cityData[shen];
       // 获取对象
        let cityId = document.querySelector("#cityId");
        // 进行遍历
        // 进行清空
        cityId.innerHTML = ``;
        console.log(shiqu);
        // 进行赋值
        for (let shiquKey of shiqu) {
            // 进行更改值
            cityId.innerHTML += `<option value="${shiquKey.valueOf()}">${shiquKey.valueOf()}</option>`;
        }
    }
</script>
</body>
</html>